<template>

  <view class="tiaomu" @tap="'showStatement(' + $1 + ')'">
    <view class="pull-left col999 date-time">
      <view class="fs14">{{ item.day }}</view>
      <view class="fs12">{{ item.week }}</view>
    </view>
    <view :class="'pull-right fs16 money ' + item.type">{{ item.amount }}</view>
    <view class="information">
      <view class="pull-left icon"><image :src="item.icon_path"></image></view>
      <view class="pull-left title">
        <view class="fs14">{{ item.name }}</view>
        <view class="fs12 description" v-if=" item.description != null ">{{ item.description }}</view>
				<view class="time">{{ item.timeStr }} · {{ item.asset }}</view>
      </view>
    </view>
  </view>

</template>

<script>

export default {
  data() {
    return {};
  },

  mixins: [],
  components: {},
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  methods: {
    showStatement(id) {
      uni.navigateTo({
        url: `/pages/statements/detail?id=${id}`
      });
    }

  },
  computed: {},
  watch: {}
};
</script>
<style lang="less">

@tmHeight: 120rpx;
.tiaomu {
	height: @tmHeight;
  padding-left: 12rpx;
  padding-right: 24rpx;
	overflow:hidden;
	border-bottom:2rpx solid #efefef;
	.money {
		display:flex;
		justify-content:center;
		flex-direction:column;
		height: @tmHeight;
	}
	.date-time {
		width:84rpx;
		height: @tmHeight;
		display:flex;
		justify-content:center;
		flex-direction:column;
		text-align:center;
	}
	.information {
		overflow:hidden;
		height: @tmHeight;
		margin-left: 84rpx;
		.title {
			display:flex;
			justify-content:center;
			flex-direction:column;
			height:@tmHeight;
			.time {
				color: #999;
				font-size: 24rpx;
			}
		}
		.description {
			color:#999;
		}
		.icon {
			height: @tmHeight;
			margin:0 16rpx;
			display:flex;
			justify-content:center;
			flex-direction:column;
			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
}

</style>